<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){


//***********获得焦点删掉错误提示***********8
$("#id_confirm_password").focus(function(){  $("#pass").remove(); });
$("#form").focus(function(){ $("#zcts").remove(); });



  //当重新输入密码的时候检
  $("#id_confirm_password").blur(function(){

 if ($("#id_confirm_password").val()==$("#id_password").val())
   { console.log("两次密码相同");}
 else
 $("#id_confirm_password").after("<div id='pass' style='float: right; font-size:10px; color:red;'>"+"两次输入的密码不相同"+"</div>") ;

 });


// 手机号ajx发送
  $("#yzm").click(function(){

   $.ajax({
      url:"/mobile_phone/", //别忘了加双引号
      type:"GET",
      data:{"id_mobile_phone":$("#id_mobile_phone").val(),"tpl":"register"}, //object类型，键值形式的，可以不给键加引号
      success:function (data) {
           $("#ts").remove();
           if(data=="验证码发送成功!")
           {
           $("#id_mobile_phone").after("<div id='ts' style='float: right; font-size:10px; color:green;'>"+data+"</div>") ;

                // 获取验证码 倒计时60s
     var count = 60;
     var countdown = setInterval(CountDown, 500);
     function CountDown() {
     $("#yzm").attr("disabled", true);
     $("#yzm").val(count + "s再次获取");
     if (count == 0)
      {
        $("#yzm").val("点击获取验证码").removeAttr("disabled");
        clearInterval(countdown);
       }
     count--;  }


           }
           else
           $("#id_mobile_phone").after("<div id='ts' style='float: right; font-size:10px; color:red;'>"+data+"</div>") ;

      }
    });
    //失去焦点清除错误提示
    $("#id_mobile_phone").focus(function(){$("#ts").remove();});



                });



  // 注册成功添加数
  $("#zc").click(function(event){
      //event.preventDefault();
     console.log("点击了注册");

     //console.log($(#ty).val());

     if($("#ty").get(0).checked){
    $.ajax({
      url:"/add_user/",
      type:"POST",
      data:{"username":$("#id_username").val(),"password":$("#id_password").val(),
      "mobile_phone":$("#id_mobile_phone").val(),"email":$("#id_email").val(),"code":$("#id_code").val()}, //object类型，键值形式的，可以不给键加引号
      success:function (data) {
           $("#zcts").remove();
           $("#zc").after("<div id='zcts' style='float: right; font-size:10px; color:red;'>"+"data"+"</div>") ;
                               }
           });}
           else
         {
             $("#zcts").remove();
           $("#zc").after("<div id='zcts' style='float: right; font-size:10px; color:red;'>"+"同意健康告知"+"</div>") ;}




    });






});

</script>

</head>

<body>

<div class="account" style=" width:400px;margin:0 auto;">

<h1 class="zc" style="text-align:center">注册</h1>

<form method="post" id="form">
{%for field in form %}
    {% if field.name == 'code' %}
    <div class="form-group">
    <label for="{{ field.id_for_label }}">{{ field.label }}</label>

        <div class="clearfix">
            <div class="col-md-6" style="padding-left:0"> {{field}}</div>
            <div class="col-md-6"><input type="button" class="btn btn-default" value="点击获取验证码" id="yzm"></div>
        </div>

      </div>


    {% else %}
  <div class="form-group">
    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
      {{field}}
      </div>

    {% endif %}
{% endfor %}
<!--其中field.id_for_label与{{field}}的框是绑定的就是他的id值-->
    <div class="checkbox">
    <label>
      <input type="checkbox" id="ty"> 已阅读同意
    </label>
        <a href="www.baidu.com"><<健康系统使用告知书>></a>
  </div>
  <button type="submit" class="btn btn-primary"  value="" id="zc">注册</button>

</form>

</div>

<!--自动生成HTML-->

</body>
</html>